<template>
	<view class="page_post_detail">
		<!-- 帖子标题等内容 -->
		<view class="top_content">
			<view class="post_title">{{ post.title }}</view>
			<view class="post_info_list">
				<navigator
					:url="`/pages/my-home/my-home?user_id=${post.user_id}`"
					class="author_name"
				>
					<text class="the_val">{{ post.name }}</text>
				</navigator>
				<view class="post_time">
					<text class="the_tag">发布于</text>
					<text class="the_val">{{ formatUTC(post.created_at) }}</text>
				</view>
			</view>
		</view>
		<!-- 正文内容 -->
		<view class="post_content">
			<view v-html="post.content"></view>
		</view>
		<!-- 底部赞同、评论等操作 -->
		<view class="footer_option">
			<view class="left_like">
				<van-button
					@click="handleLike"
					class="left_like"
					icon="good-job-o"
					type="primary"
					size="small"
					color="blue"
					round
					:plain="!isLike"
					>点赞{{ likeUsers.length }}</van-button
				>
			</view>
			<view class="right_options">
				<van-icon
					class="collection"
					name="star"
					:color="isCollection ? '#ffd21e' : ''"
					@click="handleCollection"
				/>
				<van-icon class="comment" name="chat-o" @click="hanldeOpenComment" />
			</view>
		</view>

		<!-- 评论区 -->
		<view class="comment_section">
			
			<uni-section title="评论" type="line">
			
				<view class="comment_wrap" >
					<van-empty description="暂无评论" v-if="commentList.length === 0"/>
					<scroll-view
						v-else
						class="scroll_view"
						scroll-y="true"
						scroll-with-animation="true"
					>
						<rely-comment
							v-for="child in commentList"
							:key="child.id"
							:comment="child"
							:allComments="commentList"
							:userId="userInfo.user_id"
							@relyComment="handleRelyComment"
							@removeComment="handleRemoveComment"
						/>
					</scroll-view>
					<view class="send_comment">
						<van-cell-group class="send_input">
							<uni-easyinput
								v-model="commentValue"
								placeholder="输入评论内容"
								:inputBorder="false"
							/>
						</van-cell-group>
						<van-button
							@click="handleComment"
							class="send_btn"
							type="info"
							size="small"
							plain
							>发布</van-button
						>
					</view>
				</view>
			</uni-section>
		</view>
	</view>
	<van-dialog id="van-dialog" />

	<!-- 回复评论 -->
	<uni-popup ref="popup" type="bottom">
		<view class="send_comment">
			<van-cell-group class="send_input">
				<uni-easyinput
					v-model="message"
					:placeholder="commentPlaceholder"
					:inputBorder="false"
				/>
			</van-cell-group>
			<van-button
				@click="handleRelyCommentSend"
				class="send_btn"
				type="info"
				size="small"
				plain
				>发布</van-button
			>
		</view>
	</uni-popup>

	<!-- 删除 -->
	<uni-popup ref="alertDialog" type="dialog">
		<uni-popup-dialog
			type="error"
			cancelText="关闭"
			confirmText="同意"
			title="提示"
			content="确定删除这条评论吗"
			@confirm="dialogConfirm"
			@close="dialogClose"
		></uni-popup-dialog>
	</uni-popup>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { computed, nextTick, onMounted, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

import usePostStore from '@/store/post.js'
import useLoginStore from '@/store/login.js'
import { formatUTC } from '@/utils/format.js'
import RelyComment from '@/components/rely-comment/rely-comment.vue'
// 1.展示轮播图 展示社团数据
const postStore = usePostStore()
const loginStore = useLoginStore()
const { post, favUsers, likeUsers, commentList } = storeToRefs(postStore)
const { userInfo } = storeToRefs(loginStore)
// 2.获取来的id
onLoad((option) => {
	const { post_id } = option
	postStore.getPostByIdAction(post_id)
	postStore.searchFavorityUsersAction(post_id)
	postStore.searchLikeUsersAction(post_id)
	postStore.searchCommentByIdAction(post_id)
})

// 判断是否点赞
const isLike = computed(() => {
	return likeUsers.value.some((item) => item.user_id === userInfo.value.user_id)
})

// 判断是否收藏
const isCollection = computed(() => {
	return favUsers.value.some((item) => item.user_id === userInfo.value.user_id)
})

// 处理点赞
function handleLike() {
	postStore.likePostAction(post.value.id)
}

// 处理收藏
function handleCollection() {
	postStore.collectPostAction(post.value.id)
}

/*评论相关*/

// 发表评论
const commentValue = ref('')
function handleComment() {
	if (commentValue.value === '') return
	postStore.publishCommentAction(post.value.id, commentValue.value)
	commentValue.value = ''
}

// 回复评论
const message = ref('')
const popup = ref('')
const replyCommentId = ref('')
const commentPlaceholder = ref('')
function handleRelyComment(comment) {
	popup.value.open('bottom')
	commentPlaceholder.value = `回复${comment.name}`
	replyCommentId.value = comment.id
}
function handleRelyCommentSend() {
	if (message.value === '') return
	postStore.replyCommentAction(
		post.value.id,
		message.value,
		replyCommentId.value
	)
	message.value = ''
	popup.value.close()
}

// 删除评论
const alertDialog = ref('')
const commentId = ref('')
function handleRemoveComment(id) {
	alertDialog.value.open()
	commentId.value = id
}

function dialogConfirm() {
	postStore.removeCommentByIdAction(commentId.value)
}
</script>

<style lang="less" scoped>
page {
	background-color: #fff;
}

.page_post_detail {
	// 详情页头部信息
	.top_content {
		// height: 200px;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.12);
		background-color: #fff;
		z-index: 99;
		margin-bottom: 10px;
		padding: 15rpx;

		.post_title {
			font-size: 40rpx;
			font-weight: 700;
			margin-bottom: 20rpx;
		}

		.post_info_list {
			display: flex;

			.author_name,
			.view_count,
			.like_count,
			.post_time {
				margin-right: 20rpx;
				font-size: 27rpx;
				color: rgba(0, 0, 0, 0.6);
				margin: 30rpx 0;
				padding-right: 20rpx;
				display: flex;
				align-items: center;

				.the_tag {
					padding-right: 10rpx;
				}

				.the_val {
				}
			}
		}
	}
	.comment_section {
		margin-top: 20rpx;
	}
	//   帖子内容信息
	.post_content {
		padding: 35rpx;
		background-color: #fff;
		font-size: 32rpx;
		line-height: 50rpx;
		padding-bottom: 150rpx;
	}

	.footer_option {
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
		.left_like {
			font-size: 35rpx;
		}

		.right_options {
			.share,
			.collection,
			.comment {
				font-weight: 700;
				color: #545454;
				font-size: 50rpx;
				margin-right: 30rpx;
			}
		}
	}
}

// 帖子评论
.comment_wrap {
	// box-shadow: 0 0rpx 5px rgba(0, 0, 0, .12);
	margin-top: 10px;
	padding: 20rpx;
	padding-bottom: 100rpx;
	position: relative;
	.scroll_view {
		height: 550rpx;
		.comment_item {
			padding-left: 25rpx;
			margin-bottom: 30rpx;

			.user_avatar {
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.comment_content_wrap {
				display: flex;
				vertical-align: middle;
				align-items: center;
				.username {
					font-weight: 700;
					font-size: 28rpx;
					margin-bottom: 10rpx;
				}
			}
			.content {
				margin-top: 10rpx;
				margin-left: 70rpx;
				font-size: 27rpx;
				color: #444;
			}

			.like_wrap {
				margin-top: 25rpx;
				margin-left: 20rpx;
				width: 50rpx;
				height: 50rpx;
				font-size: 28rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: var(--lightTextColor);

				.like_icon {
					font-size: 35rpx;
				}
			}

			// 点赞后的激活样式
			.active {
				color: var(--themeColor);
			}
		}
	}
}
.send_comment {
	position: fixed;
	width: 100%;
	height: 200rpx;
	background-color: #fff;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	.send_input {
		width: 580rpx;
	}
	.send_btn {
		width: 85rpx;
	}
}
</style>
